<!DOCTYPE html>
<html>
<head>
    <title>图片上传与展示</title>
</head>
<body>
<h2>上传图片</h2>
<input type="file" id="imageInput">
<button onclick="uploadImage()">上传图片</button>
<h2>展示图片</h2>
<div id="imageContainer"></div>
<script>
    function uploadImage() {
        var fileInput = document.getElementById('imageInput');
        var file = fileInput.files[0];
        var formData = new FormData();
        formData.append('file', file);
        fetch('/upload', {
            method: 'POST',
            body: formData
        })
            .then(response => response.text())
            .then(result => {
                if (result === '上传成功') {
                    showImage(file.name);
                } else {
                    console.log('上传失败');
                }
            })
            .catch(error => console.error('Error:', error));
    }
    function showImage(fileName) {
        var imageContainer = document.getElementById('imageContainer');
        var imgElement = document.createElement('img');
        imgElement.src = 'resources/images/' + fileName;
        imageContainer.appendChild(imgElement);
    }
</script>
</body>
</html>